<template>
  <span class="color-picker" :style="{ backgroundColor: colors.hex }" @click="show">
    <div v-if="visible" ref="dom" class="color-picker__sketch" tabindex="-1" @blur="hide">
      <Sketch :value="colors" @input="handleChange" />
    </div>
  </span>
</template>

<script>
import { Sketch } from 'vue-color'
export default {
  name: 'ColorPicker',
  components: {
    Sketch
  },
  model: {
    prop: 'colors',
    event: 'change'
  },
  props: {
    colors: {
      type: Object,
      default: () => ({ hex: '#ffffff' })
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show(e) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dom.focus()
      })
    },
    hide() {
      this.visible = false
    },
    handleChange(c) {
      this.$emit('change', c)
    }

  }
}
</script>

<style lang="scss" scoped>
.color-picker {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
  vertical-align: sub;
  border: 1px solid #7c939d;
  border-radius: 4px;
  .color-picker__sketch {
    position: absolute;
    top: 22px;
    left: 0;
  }
}
</style>
